<template>
	<view class="main">
			<view class="close" @click="goBack">
					<image src="../../static/image/login-back.png" mode=""></image>
				</view>
		<view class="login">
			{{$t('login.bind')}}
		</view>
		<view class="register">
			{{$t('login.bindPhone')}}
		</view>
		<uni-forms class="forms" :modelValue="formData" label-position="top">
			<uni-forms-item :label="$t('login.tel')" name="tel">
				<text>+86</text>
				<uni-easyinput type="number" v-model="formData.tel"  :placeholder="$t('login.doTel')" />
			</uni-forms-item>

			<uni-forms-item name="code" :label="$t('login.code')">
				<uni-easyinput @blur="blur" type="text" v-model="formData.code" :placeholder="$t('login.doCode')" />
				<text class="codes" v-if="isShow" @click="code">{{$t("login.Code")}}</text>
				<text class="codes timer" v-else>{{$t("login.please")}}{{num}}{{$t('login.again')}}</text>
			</uni-forms-item>

		</uni-forms>
		<button class="btn" type="primary" :class="{'dis':isDisabled}" @click="submit"
			:disabled="isDisabled">{{$t('login.confirm')}}</button>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				formData: {
					tel: "",
					code: "",
					password: ""
				},
				isShow: true,
				num: 60,
				isDisabled: true,
				isCode: false,
				openid:"",
				Pcode:""
			}
		},
		methods: {
			goBack() {
				uni.reLaunch({
					url:"/pages/login/login"
				})
			},
			// 获取验证码
			code() {
				var reg = new RegExp(/^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/)
				if (!reg.test(this.formData.tel)) {
					uni.showToast({
						title: "请输入正确手机号",
						icon: "none"
					})
					return
				}
				this.num = 60
				this.$httpRequest({
					url: "thirdcommon/mobile/src/sms.php",
					method: "POST",
					data: {
						phone: this.formData.tel
					}
				}).then(res => {
					console.log(res)
					if (res.msg == 200) {
						this.Pcode = res.code
						this.isShow = false
						let timer = setInterval(() => {
							this.num--
							if (this.num == 0) {
								this.isShow = true
								clearInterval(timer)
							}
						}, 1000)
					} else {
						uni.showToast({
							title: "获取失败",
							icon: "none"
						})
					}

				})

			},
			blur(e) {
				if (e.detail) {
					this.isDisabled = false
				}
			},
			submit() {
				if(this.Pcode != this.formData.code){
					uni.showToast({
						title:"验证码错误",
						icon:"none"
					})
					return
				}
				console.log("this.openid",this.openid)
				this.$httpRequest({
					url: "app/api/createlogin.php",
					method: "POST",
					data: {
						service: "moodle_mobile_app",
						openId: this.openid,
						phone: this.formData.tel
					}
				}).then(res=>{
					console.log("123123123123213",this.openid)
					console.log(res)
					if(res.errorcode==200){
						let token = JSON.stringify(res)
						uni.setStorageSync('token',token)
						uni.reLaunch({
							url:"/pages/index/index"
						})
					}else{
						uni.showToast({
							title:"网络错误，请重试",
							icon:"error"
						})
					}
				})
			}
		},
		onLoad(Option) {
			console.log("option",Option.openid)
			this.openid = Option.openid
			console.log(this.openid)
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		width: 90%;
		margin: 0 auto;

		.forms {
			margin-top: 40rpx;
		}

		// .line {
		// 	width: 100%;
		// 	height: 2rpx;
		// 	background: #EBEDF0;
		// 	border-radius: 0px 0px 0px 0px;
		// 	opacity: 1;
		// 	// margin-top: -10rpx;
		// }

		::v-deep .is-input-border {
			border: none;
			border-bottom: 2rpx solid #ebedf0;
		}

		::v-deep .label-text {
			font-size: 28rpx;
			font-weight: 500;
			color: #0F1826;

		}

		::v-deep .uni-forms-item__label {
			width: 400rpx !important;
		}

		::v-deep .uni-forms-item__content {
			display: flex;
			align-items: center;
			margin-top: 20rpx;

			// text {
			// 	width: 60rpx;
			// }
			.codes {
				font-weight: 400;
				color: #4DBEC1;
				font-size: 28rpx;
			}

			.timer {
				opacity: .6;
			}

			.uni-easyinput {
				flex: 1;
			}
		}

		.close {
			margin: 120rpx 0 0;

			image {
				width: 64rpx;
				height: 64rpx;
			}
		}

		.login {
			font-size: 60rpx;
			font-weight: 500;
			color: #0F1826;
			margin: 64rpx 0 10rpx;
		}

		.register {
			font-size: 28rpx;
			font-family: PingFang TC-Regular, PingFang TC;
			font-weight: 400;
			color: #4DBEC1;
			margin-bottom: 104rpx;
		}

		.btn {
			margin-top: 66rpx;
			background-color: #4DBEC1;
			border: none;

			&.dis {

				background: rgba(77, 190, 193, 0.4);
			}
		}

		.retrieve-pass {
			margin-top: 32rpx;
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.left {
				color: #4DBEC1;
			}
		}

		.WXLogin {
			position: fixed;
			left: 50%;
			bottom: 20rpx;
			width: 50%;
			text-align: center;
			font-weight: 400;
			color: #6E7580;
			font-size: 28rpx;
			margin-left: -25%;

			image {
				width: 84rpx;
				height: 84rpx;
				margin-top: 20rpx;
				margin-bottom: 20rpx;
			}

			.privacy {
				font-size: 24rpx;
				font-weight: 400;
				color: #A9AFB8;

				text {
					color: #4DBEC1;
				}
			}
		}
	}
</style>
